<template>
  <div class="data_set">
    <div class="data_set_item">
      <h3>试验数据提醒设置</h3>
      <span>设置操作，若满足预先设定的预警次数规则，则在试验用户列表中的试验数据操作从“查看”变为“待处理”</span>
      <a-table :columns="setTableRemind" :dataSource="setDataList.experimentTaskSettings" size="middle" :pagination="false" class="data_set_item_table">
        <template slot="taskType" slot-scope="text">
          <span v-if="text==3">选项</span>
          <span v-else>计数器</span>
        </template>
        <span slot="options" slot-scope="text, record, index">
          <template>
            <div v-if="record.taskType===3" style="display: inline-block;">
              数据类型：
              <a-select mode="multiple" v-model="record.options" placeholder="请输入数据类型" style="width: 150px">
                <a-select-option v-for=" item in record.experimentTaskChoiceAnswerVOS" :key="item.id" :value="item.id">{{ item.des }}</a-select-option>
              </a-select>
            </div>
            <div v-else style="display: inline-block;">
              数据类型：
              <a-select v-model="record.options[0]" placeholder="请输入数据类型" style="width: 150px">
                <a-select-option :value="'1'">是</a-select-option>
                <a-select-option :value="'2'">否</a-select-option>
              </a-select>
            </div>
          </template>
        </span>
        <span slot="continuous" slot-scope="text, record, index">
          <template>
            是否连续：
            <a-select v-model="record.continuous" placeholder="请输入是否连续" style="width: 80px">
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </template>
        </span>
        <span slot="times" slot-scope="text, record, index">
          <template>
            任务执行次数：
            <a-input v-model="record.times" placeholder="请输入" style="width: 80px" />
          </template>
        </span>
      </a-table>
    </div>
    <div class="data_set_item">
      <h3>试验管理人员通知设置</h3>
      <span>设置试验管理人员联系方式</span>
      <table class="data_set_item_notice">
        <tr>
          <th>场景</th>
          <th>描述</th>
          <th>任务类型</th>
        </tr>
        <tr>
          <td>退出试验</td>
          <td>受试者主动退出试验时短信通知管理人员</td>
          <td>
            <a-input v-model="setDataList.quiteNoticePhone" placeholder="请输入手机号码" style="width: 200px" />
          </td>
        </tr>

        <tr>
          <td>一键求助</td>
          <td>受试者在紧急情况下24小时求助电话</td>
          <td>
            <a-input v-model="setDataList.seekHelpPhone" placeholder="请输入手机号码" style="width: 200px" />
          </td>
        </tr>
        <tr>
          <td>专家预约</td>
          <td>受试者寻求专家预约时短信提醒管理人员</td>
          <td>
            <a-input v-model="setDataList.appointmentsPhone" placeholder="请输入手机号码" style="width: 200px" />
          </td>
        </tr>
      </table>
    </div>
    <div class="data_set_item">
      <h3>筛选设置</h3>
      <span>设置招募与筛选人数</span>
      <div class="data_set_item_foot">
        <div class="data_set_item_foot_item">
          <span class="title">招募人数</span>

          <a-input v-model="setDataList.screenNumber" placeholder="请输入人数" style="width: 200px" />
        </div>
        <div class="data_set_item_foot_item">
          <span class="title"> 筛选人数</span>

          <a-input v-model="setDataList.recruitNumber" placeholder="请输入人数" style="width: 200px" />
        </div>

      </div>
    </div>
    <div class="data_set_button">
      <a-button @click="dataSetSubmitCancel" style="min-width:100px;margin-right: 20px;">取消</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="dataSetSubmit" style="min-width:100px;">提交</a-button>

    </div>
  </div>
</template>

<script>
import { getTestDataSetInfo, getTestDataSetSubmit } from '@/api/experiment'
export default {
  name: 'TestDataSet',
  data () {
    return {
      text: '',
      record: '',
      roleName: 'reminder_m3',
      stage: 'm3',
      setDataList: {},
      confirmLoading: false,
      setTableRemind: [
        {
          title: '任务名称',
          dataIndex: 'taskName',
          width: '15%',
          align: 'center'
        },
        {
          title: '任务类型',
          dataIndex: 'taskType',
          scopedSlots: {
            customRender: 'taskType'
          },
          width: '15%',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'options',
          scopedSlots: {
            customRender: 'options'
          },
          align: 'left'
        },
        {
          dataIndex: 'continuous',
          scopedSlots: {
            customRender: 'continuous'
          },
          align: 'center'
        },
        {
          dataIndex: 'times',
          scopedSlots: {
            customRender: 'times'
          },
          align: 'center'
        }
      ]
    }
  },
  components: {},
  props: {
    setExperimentId: {}
  },
  watch: {},
  methods: {
    dataSetSubmitCancel () {
      this.$emit('Cancel')
    },
    dataSetSubmit () {
      this.confirmLoading = true
      getTestDataSetSubmit(this.setDataList).then(res => {
        setTimeout(() => {
          this.confirmLoading = false
          this.$emit('Cancel')
        }, 500)
      })
    },
    queryTestDataSetInfo () {
      getTestDataSetInfo({ 'experimentId': this.setExperimentId }).then(res => {
        res.data.experimentTaskSettings.forEach(element => {
          if (element.options==null) {
            element.options = []
          }
        });
        this.setDataList = res.data
      })
    }
  },
  filters: {},
  computed: {},
  created () { },
  mounted () {
    this.queryTestDataSetInfo()
  },
  destroyed () { }
}
</script>

<style lang="less">
.data_set {
  background: #fff;
  padding: 0 25px;
  .data_set_item {
    padding-top: 30px;
    h3 {
      padding-left: 8px;
      margin-bottom: 10px;
      background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
      font-size: 20px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    span {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }
    .data_set_item_table {
      margin-top: 30px;
    }
    .data_set_item_notice {
      margin-top: 30px;
      width: 100%;
      tr {
        margin-left: 50px;
        height: 45px;
        th {
          font-size: 14px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 600;
          color: rgba(74, 74, 74, 1);
          width: 33.33%;
        }
        td {
          font-size: 14px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
      tr:hover {
      }
    }
    .data_set_item_foot {
      width: 100%;
      margin: 30px 20px;
      .data_set_item_foot_item {
        width: 33.3%;
        display: inline-block;
        .title {
          font-size: 16px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
        }
      }
    }
  }
  .data_set_button {
    widows: 100%;
    text-align: right;
    margin-right: 70px;
    padding-bottom: 40px;
  }
}
</style>
